<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="top">
          <span class="text">说明：目前支持学科和关键字条件筛选</span>
          <el-button
            type="success"
            class="addgreen button"
            @click="$router.push({ path: '/questions/new' })"
          >
            <i class="el-icon-edit" />
            新增试题
          </el-button>
        </div>
        <!-- 1 -->
        <div style="display: flex">
          <el-form-item label="学科">
            <el-select v-model="form.subjectID" placeholder="请选择">
              <el-option
                v-for="item in newlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="form.catalog" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="form.label" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" />
          </el-form-item>
        </div>
        <!-- 2 -->
        <div style="display: flex">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option label="单选" value="1" />
              <el-option label="多选" value="2" />
              <el-option label="简答" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option label="简单" value="1" />
              <el-option label="一般" value="2" />
              <el-option label="困难" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="item in newlist"
                :key="item.id"
                :label="item.direction"
                :value="item.direction"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="form.creator" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.creator"
                :value="item.creator"
              />
            </el-select>
          </el-form-item>
        </div>
        <!--  -->
        <div style="display: flex">
          <el-form-item label="题目备注">
            <el-input v-model="form.province" />
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="form.province" />
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              v-model="form.province"
              class="city"
              style="width: 130px"
              placeholder="请选择"
            >
              <el-option label="上海区" value="shanghai" />
              <el-option label="北京区" value="beijing" />
            </el-select>
            <el-select
              v-model="form.province"
              style="width: 130px; margin-left: 10px"
              placeholder="请选择"
            >
              <el-option label="上海区" value="shanghai" />
              <el-option label="北京区" value="beijing" />
            </el-select>
          </el-form-item>
          <div class="button">
            <el-button style="height: 40px" @click="del()">清除</el-button>
            <el-button
              style="margin-left: 10px; height: 40px"
              type="primary"
              @click="search"
              >搜索</el-button
            >
          </div>
        </div>
      </el-form>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- <i class="el-icon-date"></i> 我的行程 -->
        <el-alert
          :title="`共${total}条记录`"
          type="info"
          :closable="false"
          class="total"
          show-icon
        />
        <el-tab-pane label="全部" name="first">
          <elTable
            :table-data="tableData"
            @getQuestionBankList="getQuestionBankList"
            @openAuditDialog="openAuditDialog"
            @openDiola="openDiola"
          />
          <!-- ref="questiondetai" -->
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <elTable :chk-state="0" />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <elTable :chk-state="1" />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <elTable :chk-state="2" />
        </el-tab-pane>
      </el-tabs>
      <div class="block">
        <el-pagination
          :current-page="page"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="closedialog"
    >
      <el-descriptions :column="4">
        <el-descriptions-item label="【题型】">{{
          questiondetai.questionType === '1'
            ? '单选'
            : questiondetai.questionType === '2'
            ? '多选'
            : '简答'
        }}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{
          questiondetai.number
        }}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{
          questiondetai.difficulty === '1'
            ? '简单'
            : questiondetai.difficulty === '2'
            ? '一般'
            : '困难'
        }}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{
          questiondetai.tags
        }}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{
          questiondetai.subjectName
        }}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{
          questiondetai.directoryName
        }}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{
          questiondetai.direction
        }}</el-descriptions-item>
      </el-descriptions>
      <hr />
      <div class="padd">【题干】：</div>
      <div class="blue" v-html="questiondetai.question" />
      <div>
        {{
          questiondetai.questionType === '1'
            ? '单选题'
            : questiondetai.questionType === '2'
            ? '多选题'
            : '简答题'
        }}
        选项：(以下选中的选项为正确答案)
        <div>
          <el-checkbox disabled />
        </div>
        <div>
          <el-checkbox disabled />
        </div>
        <div>
          <el-checkbox disabled />
        </div>
        <div>
          <el-checkbox disabled />
        </div>
      </div>
      <hr />
      <div class="padd">【参考答案】：{{ questiondetai.answer }}</div>
      <hr />
      <div class="padd">【答案解析】:{{ questiondetai.videoURL }}</div>
      <hr />
      <div class="padd">【题目备注】：{{ questiondetai.remarks }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeFn">关闭</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog title="审核" :visible.sync="auditVisible" width="27%" :before-close="closeAuditFn">
      <el-radio v-model="radio" label="1">通过</el-radio>
      <el-radio v-model="radio" label="2">拒绝</el-radio>
      <el-input class="input" type="textarea" :rows="2" placeholder="请输入审核意见" v-model="textarea"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAuditFn()">取 消</el-button>
        <el-button type="primary" @click="submitAuditFn()">确 定</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>
<script>
import elTable from './elTable'
import { getQuestionBankListApi } from '@/api/questionBank'
import { getsimpleApi } from '@/api/subjeckts'

export default {
  //   name: 'elDescriptions',
  components: {
    elTable
  },
  props: {},
  data() {
    return {
      form: {
        catalog: '',
        province: '',
        questionType: '',
        keyword: '',
        subjectID: '',
        difficulty: '',
        creator: '',
        direction: ''
      },
      activeName: 'first',
      total: 10,
      page: 1,
      pagesize: 5,
      tableData: [],
      dialogVisible: false,
      questiondetai: {},
      list: [],
      newlist: []
    }
  },
  computed: {},
  watch: {},

  created() {
    this.getQuestionBankList()
    this.subject()
  },
  mounted() {
    this.getQuestionBankList()
  },
  methods: {
    openDiola(res) {
      this.dialogVisible = true
      console.log(this.tableData)
      this.questiondetai = res
    },
    async subject() {
      const res = await getsimpleApi()
      console.log(res)
      this.newlist = res
    },
    // 搜索
    async search() {
      this.getQuestionBankList(this.form)
      // this.tableData = res.items
    },
    del() {
      this.form = {
        catalog: '',
        province: '',
        questionType: '',
        keyword: '',
        subjectID: '',
        difficulty: '',
        creator: '',
        direction: ''
      }
      this.getQuestionBankList()
    },
    // async list() {
    //   const res = await listApi()
    //   console.log(res)
    // },

    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.page = 1
      this.getQuestionBankList()
    },
    handleCurrentChange(val) {
      this.pagesize = val
      this.getQuestionBankList()
    },

    async getQuestionBankList(form) {
      const res = await getQuestionBankListApi(this.pagesize, this.page, form)
      this.tableData = res.items
      this.total = res.counts
    },
    closedialog() {
      this.dialogVisible = false
    },
    closeFn() {
      this.dialogVisible = false
    },

    openAuditDialog() {
      this.auditVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
.input {
  margin-top: 20px;
}
.blue {
  color: blue;
  font-size: 16px;
}
.padd {
  padding: 10px 0;
}
.textright {
  margin-right: 25px;
}
.button {
  position: absolute;
  right: 70px;
}
.top {
  padding: 40px;
}
.addgreen {
  height: 40px;
  margin-top: -12px;
}
.text {
  color: #ffc0d5;
  font-size: 15px;
}
.total {
  margin-bottom: 15px;
}
::v-deep .el-table th,
.el-table tr {
  background-color: #fafafa;
}
.block {
  float: right;
  margin: 20px 0;
}
::v-deep .el-dialog__header {
  background-color: #409eff;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__headerbtn .el-icon-close:before {
  color: #fff;
}
::v-deep .el-form-item--mini {
  width: 24%;
  .el-form-item__content {
    width: calc(100% - 80px);
    .el-select--mini {
      width: 100%;
    }
    .city {
      width: 48%;
      margin-right: 1%;
    }
  }
}
</style>
